
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TimeStamp</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css">
    <style>
        #app {
            width: 1600px;
            margin: auto;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>时间转换</h3>
    <div>
        时间格式化
        <input type="text" v-model="t1"> {{ t1String }}
    </div>
    <br>
    <div>
        时间戳转时间
        <input type="text" v-model="t2"> {{ t2String }}
    </div>
    <br>
    <div>
        时间格式化
        <input type="text" v-model="t3"> {{ t3String }}
    </div>
    <br>
    <div>
        时间戳转时间
        <input type="text" v-model="t4"> {{ t4String }}
    </div>


    <h3>时间汇总</h3>
    <div style="display: flex">
        <div style="flex: 1;padding: 20px;">
            <table class="table table-bordered" style="flex: 1; padding: 20px;">
                <tr>
                    <td>北京时间</td>
                    <td>UTC时间</td>
                    <td>时间戳</td>
                    <td>时间戳 -1</td>
                    <td>晚上</td>
                    <td>晚上 -1</td>
                </tr>
                <div>
                    <tr v-for="(item,index) in list.start">
                        <td>{{ item.bj }}</td>
                        <td>{{ item.utc }}</td>
                        <td>{{ item.ts }}</td>
                        <td>{{ item.ts ? item.ts -1 : '' }}</td>
                        <td>{{ item.ts ? item.ts + 86400 : '' }}</td>
                        <td>{{ item.ts ? item.ts + 86400-1 : '' }}</td>
                    </tr>
                </div>
            </table>
        </div>

        <div style="flex: 1;padding: 20px;">
            <table class="table table-bordered">
                <tr>
                    <td>北京时间</td>
                    <td>UTC时间</td>
                    <td>时间戳</td>
                    <td>时间戳 -1</td>
                    <td>晚上</td>
                    <td>晚上 -1</td>
                </tr>
                <tr v-for="(item,index) in list.end">
                    <td>{{ item.bj }}</td>
                    <td>{{ item.utc }}</td>
                    <td>{{ item.ts }}</td>
                    <td>{{ item.ts ? item.ts -1 : '' }}</td>
                    <td>{{ item.ts ? item.ts + 86400 : '' }}</td>
                    <td>{{ item.ts ? item.ts + 86400-1 : '' }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    function dayInMonth(y, m) {
        if (y % 4 === 0 || y % 400 === 0) {
            // 闰年
            if (m === 1) {
                return 29;
            }
        }
        return days[m];
    }

    var vm = new Vue({
        el: "#app",
        data: {
            list: {start: [], end: []},
            startYear: 2019,
            t1: '',
            t1String: '',
            t2: '',
            t2String: '',

            t3: '',
            t3String: '',
            t4: '',
            t4String: '',
        },
        mounted: function () {
            // 起始时间为今年.
            for (var y = this.startYear; y < this.startYear + 3; y++) {
                this.list.end.push({
                    bj: y,
                    ts: null,
                });
                this.list.start.push({
                    bj: y,
                    ts: null,
                });
                for (var i = 0; i < 12; i++) {
                    // 2020-01-01
                    start = moment([y, i, 1]).add(8, 'H');
                    this.list.start.push({
                        bj: start.format('YYYY-MM-DD HH:mm:ss'),
                        utc: start.utc().format('YYYY-MM-DD HH:mm:ss'),
                        ts: start.unix(),
                    });

                    start = moment([y, i, dayInMonth(y, i)]).add(8, 'H');
                    this.list.end.push({
                        bj: start.format('YYYY-MM-DD HH:mm:ss'),
                        utc: start.utc().format('YYYY-MM-DD HH:mm:ss'),
                        ts: start.unix(),
                    });
                }
            }
        },
        watch: {
            t1: function () {
                this.t1String = moment(this.t1).unix();
            },
            t2: function () {
                this.t2String = moment(this.t2 * 1000).format('YYYY-MM-DD HH:mm:ss');
            },
            t3: function () {
                this.t3String = moment(this.t3).unix();
            },
            t4: function () {
                this.t4String = moment(this.t4 * 1000).format('YYYY-MM-DD HH:mm:ss');
            }
        }
    })
</script>
</body>
</html>